<template>
    <div class="admin-key">

        <div class="filter-container head">
            <el-select class="ml-10" size="small" @change="select_db" v-model="screening.db" placeholder="BD" style="width:100px;">
                <el-option v-for="item in NoDBList" :key="item.value+1" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-input class="ml-10 mr-10" size="small" v-model="screening.key" @input="screening_key_input" placeholder="占位" style="width:220px;"></el-input>
            <el-button size="small" @click="add_key_show = true" type="success">添加key</el-button>
        </div>

        <div class="contest">
            <div class="key-box">
                <div class="head">
                    <span>key</span>
                    <el-input style="margin-right: 5px;" :disabled="screening_key_loading" size="mini" v-model="screening_key" @keyup.enter="screening_key_input" placeholder="筛选"></el-input>
                    <el-button :loading="screening_key_loading" @click="screening_key_input" size="mini" icon="el-icon-search" circle></el-button>
                </div>
                <el-scrollbar>
                    <div v-loading="screening_key_loading" class="list">
                        <div class="kong" v-if="listPage.length == 0 && !screening_key_loading">数据为空</div>
                        <div class="item" v-else v-for="item in listData" :key="item" @click="key_click(item)">
                            <span :class="{'is-select': select_key == item}">{{item}}</span>
                            <div class="delete" @click.stop="delectKey(item)">
                                <i class="el-icon-delete"> </i>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
                <div class="statistics">
                    <el-dropdown trigger="click" @command="count_change">
                        <span class="el-dropdown-link">
                            {{page_size}}条/页<i class="el-icon-arrow-up el-icon--right"></i>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="item,index in page_sizes" :key="index" :command="item" :disabled="page_size == item">{{item}}条/页</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>key总数:{{total}}</span>
                    <!-- <span>筛选后:{{sift}}</span> -->
                </div>
                <!-- sizes,  -->
                <el-pagination small layout="prev, pager, next" @current-change="page_change" v-model:page-size="page_size" :total="sift" :pager-count="5" v-model:current-page="page">
                </el-pagination>
            </div>
            <div class="con-box">
                <edit-key v-model:value="select_key" @del-key="listDelKey" @edit-key="listEditKey"></edit-key>
            </div>
        </div>
        <add-key v-model="add_key_show"></add-key>
    </div>
</template>

<script>
import { p_error } from '@/utils/prompt';
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue';
import { mapGetters } from 'vuex'
import { getList, getKey, ping, delKey } from '@/api/key';
import { pub_scan,pub_selectDb } from '@/api/key/pub';
import EditKey from './components/EditKey';
import { page_sizes } from '@/settings'
import AddKey from './components/AddKey';
export default defineComponent({
    name: "AdminKey",
    components: { EditKey, AddKey },
    props: {},
    setup() {
        ref()
        const num = 16;
        const NoDBList = []
        for (let i = 0; i < num; i++) {
            NoDBList.push({
                value: i,
                label: 'DB-' + i
            })
        }
        const state = reactive({
            page_sizes,
            NoDBList,
            add_key_show: false,
            // 筛选
            screening: {
                db: 0,   // 几号数据库
            },
            // 筛选key
            screening_key: "",
            screening_key_loading: false,

            total: 0,  //筛选前数量
            sift: 0, //筛选后

            page: 1, //第几页
            page_size: 20,  // 每页的数量
            cursor: '0', // 当前游标
            listPage: []
        })
        return toRefs(state)
    },
    computed: {
        ...mapGetters([
            'select_key',
            'key_type'
        ]),
        listData() {
            var sta = (this.page - 1) * this.page_size
            var end = this.page * this.page_size
            return this.listPage.slice(sta, end)
        }
    },
    watch: {},
    unmounted() {  // 组件卸载完成后执行的函数
        // 请除选中的key
        this.$store.commit('key/SET_SELECT', '')
    },
    mounted() {
        ping().then((res) => {
            this.screening_key_input()
        })
    },
    methods: {
        delectKey(item) {
            p_error(`确定要删除 ${item} 吗？这将不可以恢复`, (instance, done) => {
                instance.confirmButtonLoading = true
                delKey(item).then((res) => {
                    done()
                }).finally(() => {
                    instance.confirmButtonLoading = false
                })
            }).then(() => {
                ElNotification({
                    title: '删除成功',
                    message: `${item} 已被成功删除`,
                    type: 'success',
                })
                // 在列表中删除
                this.listDelKey(item)
            })
        },
        // 在列表中弃掉指定元素
        listDelKey(key) {
            var index = this.listPage.indexOf(key);
            if (index > -1) {
                this.listPage.splice(index, 1);
            }
        },
        listEditKey(data) {
            var index = this.listPage.indexOf(data.oldKey);
            if (index > -1) {
                this.listPage[index] = data.newKey
            }
        },

        key_click(key) {
            if (this.select_key != key) {
                this.$store.commit('key/SET_SELECT', key)
            } else {
                this.screening_key_loading = true
                this.$store.commit('key/SET_SELECT', '')
                setTimeout(() => { // 延迟一下，触发一下监听-刷新
                    this.$store.commit('key/SET_SELECT', key)
                    this.screening_key_loading = false
                }, 5)
            }
        },

        page_change(page) {
            if (this.listPage.length > 0 && this.cursor == "0") return
            var zhong = page * this.page_size
            var size = zhong - this.listPage.length

            if (size < 1) return

            if (this.listPage.length == 0) this.cursor = '0'

            this.screening_key_loading = true;

            pub_scan(this.cursor, "*" + this.screening_key + "*", size, this.page_size).then((res) => {
                for (let i = 0; i < res.data.list.length; i++) {
                    this.listPage.push(res.data.list[i])
                }
                this.total = res.data.map.total
                this.sift = res.data.map.sift
                this.cursor = res.data.map.cursor //更新cursor
            }).finally(() => {
                this.screening_key_loading = false;
            })
        },

        // 搜索
        screening_key_input() {
            this.listPage = []
            this.page = 1
            this.sift = 0
            this.cursor = "0"
            this.page_change(1)
        },

        // 每页数量改变事件
        count_change(a) {
            this.page_size = a
            this.screening_key_input()
        },

        select_db(){
            pub_selectDb(this.screening.db).then(res=>{
                ElNotification({
                    title: `成功切换的到${res.data.map.db}号数据库`,
                    type: 'success',
                })
            })
        }
    },
});
</script>

<style lang="less" scoped>
.admin-key {
    background-color: #fff;
    // justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;

    display: flex;
    flex-direction: column;
}

.filter-container.head {
    background-color: #fff;
    box-shadow: 0 3px 5px #dddddd;
    z-index: 2;
}
.contest {
    height: calc(100vh - 44px);
    display: flex;
    flex-direction: row;
    padding: 22px;
}

.key-box {
    width: 300px;
    height: 100%;
    position: relative;
    max-height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    // border-top: 1px solid #aaaaaa60;
    // border-right: 1px solid #aaaaaa60;
    .head {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 10px;
        // border-bottom: 1px solid #dcdfe6;
        span {
            font-size: 15px;
            margin-right: 5px;
        }
        // border-bottom: 1px solid #dcdfe6;
    }
    .list {
        min-height: 100px;
        // overflow: auto;
        .kong {
            font-weight: bold;
            font-size: 14px;
            padding: 20px;
            color: #e6a23c;
        }
        .item {
            padding: 3px 10px;
            border-bottom: 1px solid #dcdfe6;
            transition: all 0.1s;
            cursor: pointer;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            &:hover {
                background-color: #eee;
            }
            span {
                font-size: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                transition: color 0.3s;
                &.is-select {
                    color: #2ecc71;
                }
            }
            .delete {
                padding: 5px 6px;
                &:hover {
                    color: #f00;
                }
            }
        }
    }
    .statistics {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 10px 10px 2px;
        span {
            padding: 0 6px;
            font-size: 13px;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409eff;
            font-size: 13px;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    }
}
.con-box {
    min-width: 300px;
    width: calc(100% - 300px);
    position: relative;
}
</style>

<style lang="less">
.admin-key {
    .statistics {
        .el-dropdown {
            font-size: 13px;
            // 上下对齐
        }
    }
}
</style>